import React, { useState, useEffect } from 'react';
import { alpha, styled } from '@mui/system';
import Popper from '@mui/material/Popper';
import ListSubheader from '@mui/material/ListSubheader';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Chip from '@mui/material/Chip';
import Input from '@mui/material/Input';
import InputBase from '@mui/material/InputBase';
import OutlinedInput from '@mui/material/OutlinedInput';
import FilledInput from '@mui/material/FilledInput';
import ClearIcon from '@mui/icons-material/Close';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import MyComponent from './CustomChip';

const ContentMappingContext = React.createContext();
const StyledPaper = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(2),
  backgroundColor: alpha(theme.palette.primary.main, 0.1)
}));

const NewAutocomplete = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [contentMapping, setContentMapping] = React.useState({});

  const handleGlobalCopy = (e) => {
    console.log('handleGlobalCopy~~~~~~~~~~~~~~~~');
    const selectedText = window.getSelection().toString();
    console.log('selectedText:', selectedText);
    let newStr = selectedText;
    Object.keys(contentMapping).forEach((key) => {
      const sourceText = contentMapping[key];
      if (newStr.includes(key)) {
        const regex = new RegExp(key, 'g');
        const newText = newStr.replace(regex, sourceText);
        // console.log('newText:', newText);
        newStr = newText;
      }
    });
    e.clipboardData.setData('text/plain', newStr);
    console.log('newStr:', newStr);
    e.preventDefault();
  };

  useEffect(() => {
    document.addEventListener('copy', handleGlobalCopy);
    return () => {
      document.removeEventListener('copy', handleGlobalCopy);
    };
  }, [contentMapping]);
  const handleOpenPopper = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClosePopper = () => {
    setAnchorEl(null);
  };

  return (
    <div style={{ margin: '20px' }}>
      {/* <StyledPaper elevation={3}> */}
      <ContentMappingContext.Provider value={{ contentMapping, setContentMapping }}>
        <ListSubheader color="primary">This is a list subheader</ListSubheader>
        <MyComponent displayContent="test" copyContent="xxx" contentMapping={contentMapping} setContentMapping={setContentMapping} />

        <MyComponent displayContent="Hello" copyContent="World" contentMapping={contentMapping} setContentMapping={setContentMapping} />

        <MyComponent displayContent="你好" copyContent="李焕英" contentMapping={contentMapping} setContentMapping={setContentMapping} />

        <div style={{ margin: '20px 0' }}>
          <Input defaultValue="Standard Input" />
          <InputBase defaultValue="Base Input" />
          <OutlinedInput defaultValue="OutlinedInput" />
          <FilledInput defaultValue="FilledInput" />
        </div>
      </ContentMappingContext.Provider>
      {/* </StyledPaper> */}
      <Popper open={Boolean(anchorEl)} anchorEl={anchorEl} placement="bottom" transition>
        {({ TransitionProps }) => <Paper {...TransitionProps}>This is content inside the Popper!</Paper>}
      </Popper>
    </div>
  );
};

export default NewAutocomplete;
